{% load i18n %}
<form role="form" method="post" action="{{request.prefix}}/execute/launch/emailreport/">{% csrf_token %}
  <table>
    <tr>
      <td style="vertical-align:top; padding-left:15px">
        <button type="submit" class="btn btn-primary" id="emailreport" value="email" {{initially_disabled}}>{% trans "publish"|capfirst %}</button>
      </td>
      <td colspan='5' style="padding-left:15px">
        <p>{% trans "Emails the selected reports to a comma separated list of recipients. Files are zipped and attached to email." %}</p>
      </td>
    </tr>
    <tr>
      <td></td>
      <td style="padding-left:15px">
           <input class="form-check-input" type="checkbox" id="allcheckboxes" checked>
           <strong>{% trans 'file name'|capfirst %}</strong>
      </td>
      <td><strong>{% trans 'size'|capfirst %}</strong></td>
      <td><strong>{% trans 'last modified'|capfirst %}</strong></td>
      <td></td>
    </tr>
    {% for j in filesexported %}
    <tr data-file="{{j.0}}">
      <td></td>
      <td style="padding-left:15px">
          <input class="form-check-input" type="checkbox" id="{{j.0}}" checked>
          {{j.0}}
      </td>
      <td>{{j.2}}</td>
      <td>{{j.1}}</td>
    </tr>
    {% endfor %}
    <tr>
        <td style="padding-left:15px; padding-top:10px"><strong>{% trans 'emails'|capfirst %}:</strong>
        </td>
        <td style="padding-top:10px; padding-left:15px" colspan="3">
        <input type="email" class="form-control" id="emails" name="recipient" multiple value="{{user_email}}">
        </td>
    </tr>
  </table>
  <input type="hidden" name="report" id="report" value="{{all_reports}}">
</form>
<script>
function validateEmailButton() {
    var reports = "";
    var first = true;
    {% for j in filesexported %}
      if ($('#{{j.3}}').is(':checked')) {
          if (first) {
            reports = reports + "{{j.0}}";
            first = false
          }
          else {
            reports = reports + ",{{j.0}}";
          }
      }
    {% endfor %}
    $("#report").val(reports);
    var oneChecked = false;
    {% for j in filesexported %}
      oneChecked = oneChecked || $('#{{j.3}}').is(':checked');
    {% endfor %}
    var testEmail = /^([\w+-.%]+@[\w-.]+\.[A-Za-z]{2,},?)+$/;
    emails_ok = $("#emails").val() != '' && testEmail.test($("#emails").val());
    var tt = bootstrap.Tooltip.getInstance("#emails");
    if (!emails_ok) {
       $("#emails").attr('data-bs-title', '{% trans 'please correct invalid email addresses'|capfirst %}');
       if (tt) tt.dispose();
       bootstrap.Tooltip.getOrCreateInstance("#emails").show();
    }
    else {
       $("#emails").attr('data-bs-title', '{% trans 'please enter email addresses'|capfirst %}');
       if (tt) tt.hide();
    }
    $('#emailreport').prop('disabled', !(oneChecked && emails_ok));
}

$(function() {
$("#emails").on('input', function () {
    validateEmailButton();
});
$("#allcheckboxes").on("click", function(event) {
    var isChecked = $('#allcheckboxes').is(':checked');
    {% for j in filesexported %}
    $("#{{j.3}}").prop("checked", isChecked);
    {% endfor %}
    validateEmailButton();
});
{% for j in filesexported %}
$("#{{j.3}}").on("click", function(event) {
    var allChecked = true;
    {% for j in filesexported %}
      allChecked = allChecked && $('#{{j.3}}').is(':checked');
    {% endfor %}
    $("#allcheckboxes").prop("checked", allChecked);
    validateEmailButton();
});
{% endfor %}
});
</script>